<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>游戏商城</title>
	<%@ include file="/pages/common/head.jsp"%>
	<%-- 静态包含 base标签、css样式、jQuery文件 --%>
	<Script type="text/javascript">
		//显示详情功能
		$(document).ready(function () {
			$('.click_me').click(function () {
				$(".book_info").slideToggle("slow");
			});
		});

		//显示详情功能
		$(document).ready(function () {

		});

		$(function () {
			// 给加入购物车按钮绑定单击事件
			$("button.addToCart").click(function () {
				/*
				 * 在事件响应的function函数 中，有一个this对象，这个this对象，是当前正在响应事件的dom对象
				 * @type {jQuery}
				 */
				var bookId = $(this).attr("bookId");
				location.href = "cartServlet?action=addItem&id=" + bookId;
				// 发ajax请求，添加商品到购物车
				// $.getJSON("http://localhost:8080/bookmarket_war_exploded/cartServlet","action=ajaxAddItem&id=" + bookId,function (data) {
				// 	$("#cartTotalCount").text("您的购物车中有 " + data.totalCount + " 件商品");
				// 	$("#cartLastName").text(data.lastName);
				// })
			});
		});
	</Script>
</head>

<body>
<div id="header0">
	<img alt="loading" src="static/img/steam_logo.jpg" width="140px" height="100px"  align="middle" style="margin-top: -12px;cursor: pointer;border-radius: 5px">&nbsp;&nbsp;
	    <a href="pages/user/first_page.jsp">首页</a>&nbsp;
	    <a style="color: white" href="#">热销</a>&nbsp;
	<%--如果用户还没有登录,显示【登录和注册的菜单】 --%>
	<c:if test="${empty sessionScope.user}">
		<a href="pages/user/regist.jsp">注册</a>&nbsp;
		<a href="pages/user/login.jsp">登录</a>&nbsp;
		<a href="pages/cart/cart.jsp">购物车</a>
		<a href="CommentServlet?action=page&name=gamename&value=绝地求生">绝地求生</a>
	</c:if>
	<%--如果已经登录，则显示登录成功之后的用户信息。--%>
	<c:if test="${not empty sessionScope.user}">
		<a href="pages/cart/cart.jsp">购物车</a>&nbsp;
		<a href="orderServlet?action=list">我的订单</a>&nbsp;
		<!--<a href="manager/bookServlet?action=list">游戏管理</a>&nbsp;-->
		<a href="pages/manager/manager.jsp">后台管理</a>
	</c:if>
</div>

	<div id="main">
		<div id="book">
			<div class="chaxunbeijin" style="text-align: center">

			<div style="position: fixed;left: 650px">
				   <form action="client/bookServlet" method="post">
					<input type="hidden" name="action" value="pageByType">
					<label for="type"><input class="input3" placeholder="按类型搜索" id="type" type="text" name="type" value="${param.type}"></label>
					<input type="submit" value="查询" class="button2"/>
				  </form>
			</div>

			<div style="position: fixed;left: 1100px">
			         <form action="client/bookServlet" method="post">
					 <input type="hidden" name="action" value="pageByName">
				     <label for="name"><input class="input2" placeholder="按名字搜索" id="name" type="text" name="name" value="${param.name}"></label>
				     <input type="submit" value="查询" class="button2"/>
			        </form>
			</div>

			<div style="position: fixed;left: 200px">
					<form action="client/bookServlet" method="get">
						<input type="hidden" name="action" value="pageByPrice">
						<label for="min"><input  placeholder="最低价" class="input1" id="min" type="text" name="min" value="${param.min}"></label>
						<b>--</b> <label for="max"><input placeholder="最高价" class="input1" id="max" type="text" name="max" value="${param.max}"></label>
						<input type="submit" value="查询" class="button2" />
					</form>

			</div>

			</div>

			<br><br><br>
                <div style="margin:0 0 0 0;text-align: center">
                    <!--
                    <c:if test="${empty sessionScope.cart.items}">
                        <%--购物车为空的输出--%>
					<span id="cartTotalCount"> </span>
					<div style="margin-top: -10px">
						<span style="color: black;font-size: 18px" id="cartLastName"><b>当前购物车为空</b></span>
					</div>
				</c:if>
				-->
				<div style="margin: -6px 0 0 0 ;font-size: 22px">
					<a style="text-decoration: none" href="pages/cart/cart.jsp">
						<img style="border-radius: 10px;cursor: pointer" src="static/img/gouwuche.jpg" alt="loading" width="60px" height="40px" align="middle">
					</a>
					<span style="position: relative;top: 10px">:0${sessionScope.cart.totalCount}</span>
				</div>
				<c:if test="${not empty sessionScope.cart.items}">
					<%--购物车非空的输出--%>
					<div style="margin: 0">
						<span style="font-size: 18px">您刚刚将"<span style="color: orange" id="cartLastName">${sessionScope.lastName}</span>"加入到了购物车中!</span>
					</div>
				</c:if>
			</div>
			<c:forEach items="${requestScope.page.items}" var="book">
				<div class="b_list_ahead">
				<div class="b_list">

				<div class="book_name">
						<span class="sp1">游戏名:</span>
						<span class="sp2">${book.name}</span>
					</div>
					<div class="book_price" style="margin: -7px 0 0 0">
						<span class="sp1">价格:</span>
						<span class="sp2">${book.price}￥</span>
					</div>

				<div class="img_div">
					<img class="book_img" alt="loading" src="${book.imgPath}"  />
				</div>

				<div class="click_me">更多详情</div>

				<div class="book_info">

					<div class="book_author">
						<span class="sp1" id="sp1">工作室:</span>
						<span class="sp2">${book.author}</span>
					</div>
					<div class="book_sales">
						<span class="sp1" id="sp1">销量:</span>
						<span class="sp2">${book.sales}万</span>
					</div>
					<div class="book_type">
						<span class="sp1"id="sp1">类型:</span>
						<span class="sp2">${book.type}</span>
					</div>
					<div class="book_stock">
						<span class="sp1" id="sp1">评分:</span>
						<span class="sp2">${book.stock}分</span>
					</div>

				</div>

					<div class="book_add">
						<button bookId="${book.id}" class="addToCart">加入购物车</button>
					</div>

			</div>
			</div>

			</c:forEach>

		</div>
		<%--静态包含分页条--%>
	</div>
	<%--静态包含页脚内容--%>
<%@include file="/pages/common/page_nav.jsp"%>
</body>
</html>